<template>
    <div class="Index">
        <div id="main">
            <div class="bg-[#8d562c] h-[4rem] flex justify-between items-center" v-if="isLogin">
                <div class="pl-2 text-[#FFFFFF] text-[0.8rem]">
                    <span>你好,</span>
                    <span>{{username}}</span>
                </div>
                <div class="pr-4 text-[#FFFFFF] text-[0.8rem]">
                    <span @click="outlogin('确定切换账号？')">切换账号</span>
                    <span @click="outlogin('确定退出账号？')" class="w-[2rem] text-center"> 退出</span>
                </div>
            </div>
            <div class="loginBtn" v-if="!isLogin" @click="login"></div>
        </div> 
        <div class="cont">
            <!-- 选择服务器 -->
            <div class="server">
                <p @click="serverClick">{{server_text}}</p>
                <img src="@/assets/img/rightbutton.png"/>
                <ul v-if="isActive">
                    <li v-for="(item, index) in userserverlist" :key="index" @click="serverActive(item.server_name,item.role,item.sid,item.roleid,item.gid)">
                        <span>{{item.server_name}} |</span><span> {{item.role}}</span>
                    </li>
                </ul>
                <!--  -->
            </div>
            <div class="module1"></div>
            <div class="module2">
                <!-- 周 -->
                <div class="title"></div>
                <ul>
                    <li v-for="(item,index) in weekList" :key="index">
                        <div class="weekLi" :class="item.status == 2 ||item.status == 3?'grey':''">
                            <h2>第 {{item.weekday}} 天</h2>
                            <img :src="item.image"/>
                            <p>{{item.name}}</p>
                        </div>
                        <div class="succeed" v-if="item.status == 2"></div>
                    </li>
                </ul>
                <div class="title1"></div>
                <!-- 月 -->
                <div class="month">
                    <div class="list" v-for="(item,index) in monthList" :key="index">
                        <div class="monthLi" :class="monthNum>=item.days?'grey':''">
                            <div class="imgList" v-for="(n,idx) in item.bag" :key="idx">
                                <img :src="n.image"/>
                                <p>{{n.name}}</p>
                            </div>
                            <div class="addImg"></div>
                        </div>
                        <div class="monthSucceed" v-if="monthNum>=item.days"></div>
                    </div>
                </div>
                <div class="progress">
                    <div class="row">
                        <div class="bg">
                            <p v-for="(item,index) in monthList" :key="index"><span><i v-if="monthNum>=item.days"></i></span></p>
                        </div>
                        <div class="centre_row" :style="{width:monthWidth}"></div>
                    </div>
                </div>
                <div class="progress_text">
                    <p v-for="(item,index) in monthList" :key="index">{{item.days}}天</p>
                </div>
            </div>
            <div class="signIn_btn" @click="signInBtn">立即签到</div>
            <div class="rule">
                <img src="@/assets/img/signIn/rule_text.png"/>
                <div class="rule_text">
                    <p>1.玩家进入签到页面并登录后即可参与每日签到;</p>
                    <p>2.点击【立即签到】后可立即获得当日签到奖励,漏签不可补签;</p>
                    <p>3.每月累计签到到达一定数量,将解锁相应宝箱;</p>
                    <p>4.每个手机号每日可领取一个角色的签到奖励;</p>
                </div>
            </div>
        </div>
        <LoginPopup v-if="isLoginPopup" @isLoginPopUp="close"></LoginPopup>
    </div>
</template>
<script>
import LoginPopup from '../components/login.vue'
import { mapState, mapActions } from 'pinia'
import { useCounterStore } from '../stores/counter'
import qs from 'qs'
import md5 from 'js-md5';
export default {
    data(){
        return{
            username:'',//用户名
            weekList:[], //周列表
            monthList:[],
            userserverlist:'',//服务器列表
            server_text:'请选择服务器',
            isActive:false,
            isLogin:false,//是否登录
            isLoginPopup:false, //登录弹窗
            serverId:'',//服务器id
            roleId:'',//角色id
            monthNum:0,//月天数
            monthWidth:0,//月签到进度长度
            getGid:''
        }
    },
    components:{
        LoginPopup
    },
    computed: {
 
        ...mapState(useCounterStore, ['gid', 'path'])
    },
    created() {
        if(localStorage.getItem('token')){
            this.isLogin = true
            this.username = localStorage.getItem('userid')
            this.isLoginPopup = false
        }else{
            this.isLogin = false
            this.isLoginPopup = true
        }
    },
    mounted(){  
        this.getweeklist()
        
    },
    methods:{
        // 退出登陆||切换用户
        outlogin(item) {
            this.$dialog.confirm({
                title: item,
                // message: '弹窗内容',
            })
            .then(() => {
                localStorage.removeItem("token");
                localStorage.removeItem("code");
                localStorage.removeItem("state");
                // this.$router.push('/')
                // let e = `${this.path}/api/wx/GetOpenId?gid=${this.gid}&type=sign`
                let e = `https://mtshop.nextjoy.com.cn/signIn?gid=${this.gid}&type=sign`
                // let e = `http://172.20.10.2:5176/signIn?gid=${this.gid}&type=sign`
                window.location.href = e
                // 清除用户数据
            })
            .catch(() => {
                // on cancel
            });

        },
        // 获取服务器数据
        getserverlist(){
            let signmd5 = md5(`user_token=${localStorage.getItem('token')}&timestamp=${Date.parse(new Date())}&key=N5Gp6yTpl1WybuQZ0MnbEVgZ2mKOlfRE`)
            this.$http({
                method: 'post',
                url:`${this.path}/api/mtstore/role`,
                data:qs.stringify({
                    user_token: localStorage.getItem('token'),
                    timestamp:Date.parse(new Date()),
                    sign:signmd5.toUpperCase()
                })
            }).then(res => {
               
                if(res.data.status == '200'){
                    
                    if(res.data.data.role_list.length == 0  || res.data.data.role_list ==''||res.data.data.role_list==undefined){
                        this.$toast.fail(`您还没有创建角色哦~`);
                    }else{
                        this.userserverlist = res.data.data.role_list
                    }
                
                }else{
                    this.$toast.fail(`错误${res.data.message}`);
                }
            }).catch( res =>{
                console.log(res)
            })
        },
        // 获取签到数据
        getweeklist(){
            let data={}
            let signmd5;
        
            if(localStorage.getItem('token') == null||localStorage.getItem('token')==''||localStorage.getItem('token')==undefined){
                signmd5 = md5(`timestamp=${Date.parse(new Date())}&gid=${this.gid}&key=N5Gp6yTpl1WybuQZ0MnbEVgZ2mKOlfRE`)
                data={
                    timestamp:Date.parse(new Date()),
                    sign:signmd5.toUpperCase(),
                    gid:this.gid
                }
                
            }else{
                signmd5 = md5(`user_token=${localStorage.getItem('token')}&timestamp=${Date.parse(new Date())}&gid=${this.gid}&key=N5Gp6yTpl1WybuQZ0MnbEVgZ2mKOlfRE`)
               
                data={
                    user_token: localStorage.getItem('token'),
                    timestamp:Date.parse(new Date()),
                    sign:signmd5.toUpperCase(),
                    gid:this.gid
                }
            }
            
            this.$http({
                method: 'post',
                url:`${this.path}/api/signin/detailinfo`,
                data:qs.stringify(data)
            }).then(res => {
          
                if(res.data.status == '200'){
                 
                    // 周
                    let weekData = res.data.data.week
                    // 月
                    let monthData = res.data.data.month

                    // 月天数
                    this.monthNum = res.data.data.month_sign_days
           
                    // 循环周数据
                    for(var i = 0; i < weekData.length; i++){
                        var url=weekData[i].image
                        // 1)找到放图片路径的地方 拼接后端的图片名。
                        var imgurl='https://mtshop.nextjoy.com.cn/signInImg/week/'+url+'.png'
                    
                        // 2)给后端数组的图片url重新赋值
                        weekData[i].image=imgurl
                    }
                    
                    // 循环月数据
                    for(var i = 0; i < monthData.length; i++){
                
                        for(var j = 0; j < monthData[i].bag.length; j++){

                            var url=monthData[i].bag[j].image
                            // 1)找到放图片路径的地方 拼接后端的图片名。
                            var imgurl='https://mtshop.nextjoy.com.cn/signInImg/month/'+url+'.png'
                            // 2)给后端数组的图片url重新赋值
                            monthData[i].bag[j].image=imgurl
                        }
                        
                    }
                    // 周数据列表
                    this.weekList = weekData
                    // 月数据列表
                    this.monthList = monthData
                    
                    // 改变月签到进度
                    for(var i=0;i<this.monthList.length;i++){
                        if(this.monthNum>=this.monthList[0].days){
                            this.monthWidth = '28%'
                        }
                        if(this.monthNum>=this.monthList[1].days){
                            this.monthWidth = '66%'
                        }
                        if(this.monthNum>=this.monthList[2].days){
                            this.monthWidth = '98%'
                        }
                    }

                }else if (res.data.status == '1004'){
                    localStorage.removeItem("token");
                    
                }else{
                
                    this.$toast.fail(`错误${res.data.message}`);
                }
            }).catch( res =>{
                console.log(res)
            })
        },
        // 签到
        signInBtn(){
            
            let signmd5 = md5(`user_token=${localStorage.getItem('token')}&timestamp=${Date.parse(new Date())}&serverId=${this.serverId}&roleId=${this.roleId}&gid=${this.getGid}&key=N5Gp6yTpl1WybuQZ0MnbEVgZ2mKOlfRE`)

            if(localStorage.getItem('token')=='' ||localStorage.getItem('token')==null || localStorage.getItem('token')==undefined){
                this.isLoginPopup = true
            }else if(this.serverId=='' ||this.serverId==null || this.serverId==undefined){
                this.$toast.fail(`请选择服务器~`);
            }else{
                this.$http({
                    method: 'post',
                    url:`${this.path}/api/signin/weekclick`,
                    data:qs.stringify({
                        user_token: localStorage.getItem('token'),
                        timestamp:Date.parse(new Date()),
                        sign:signmd5.toUpperCase(),
                        serverId:this.serverId,
                        roleId:this.roleId,
                        gid:this.getGid
                    })
                }).then(res => {
            
                    if(res.data.status == '200'){
                        this.$toast.fail(`签到成功~`);
                        this.getweeklist()
                    }else{
                        this.$toast.fail(`${res.data.message}`);
                    }
                }).catch( res =>{
                    console.log(res)
                })
            }
        },
        // 点击选择服务器显示服务列表
        serverClick(){
            this.isActive = !this.isActive

            if(this.isActive){
               this.getserverlist()
            }
            
        },
        // 点击服务器列表
        serverActive(server_name,role,sid,roleid,gid){
            // 存储当前服务器、角色
            this.serverId = sid
            this.roleId = roleid
            this.getGid = gid
            this.server_text = server_name+' | '+role
            // 隐藏服务器列表
            this.isActive = false
        },
        // 显示登录窗口
        login(){
            this.isLoginPopup = true
        },
        // 关闭登录窗口
        close(e){
            this.isLoginPopup = e
        }
    }
}
</script>
<style scoped>
.Index{
    width: 100%;
    height: 100%;
    background: url(../assets/img/logoBg.png) no-repeat center center;
    background-size: cover;
}
#main{
    width: 100%;
    height: 4rem;
    position: relative;
    background: #834e26;
}
#main .loginBtn{
    width: 5.5467rem;
    height: 2.2667rem;
    background: url(../assets/img/loginbtn.png) no-repeat center center;
    background-size: cover;
    position: absolute;
    right: .8rem;
    top: .9067rem;
}
.cont{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.cont .server{
    width: 100%;
    height: 1.8667rem;
    background: #a97a57;
    border-bottom: .1067rem solid #834e26;
    position: relative;
}
.cont .server>p{
    color: #fff0c3;
    line-height: 1.8667rem;
    font-size: .8rem;
    font-weight: 500;
    padding-left: .5333rem;
}
.cont .server>img{
    display: block;
    width:.6133rem;
    height: .9333rem;
    position: absolute;
    right: 0.5333rem;
    top: .48rem;
}
.cont .server>ul{
    width: 100%;
    background: #fff;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: inset 0px 0px 14px #d7d7d7;
}
.cont .server>ul>li{
    width: 90%;
    height: 3.2rem;
    margin: 0 auto;
    border-bottom: 1px solid #eee;
    line-height: 3.2rem;
    font-size: 1.1rem;
    color: #834e26;
}
.cont .server>ul>li>span{
    font-weight: 600;
}
.cont .server>ul>li>span:last-child{
    font-weight:normal;
    font-size: .96rem;
}
.module1{
    width: 100%;
    height: 10.9333rem;
    background: url(../assets/img/signIn/topImg.png) no-repeat;
    background-size:100% 100%;
}
.module2{
    width: 100%;
    height: 37.9467rem;
    background: url(../assets/img/signIn/bg.png) no-repeat;
    background-size:100% 100%;
    margin-top: -0.5333rem;
    overflow: hidden;
}
.title{
    width: 12.9067rem;
    height: 1.5467rem;
    background: url(../assets/img/signIn/title1.png) no-repeat;
    background-size:100% 100%;
    margin: 3.4667rem auto 1.6rem;
}
.module2>ul{
    width: 24rem;
    height: 14.72rem;
    margin: 0 auto;
}
.module2>ul>li{
    width: 4.5333rem;
    height: 5.8133rem;
    background: url(../assets/img/signIn/signInBg.png) no-repeat;
    background-size:100% 100%;
    float: left;
    margin: 0 .72rem 1.44rem;
    position: relative;
}
.module2>ul>li .weekLi{
    width: 100%;
    height: 100%;
    background: url(../assets/img/signIn/signInBg.png) no-repeat;
    background-size:100% 100%;
}
.module2>ul>li:last-child .weekLi{
    width: 10.4rem;
    height: 5.8133rem;
    background: url(../assets/img/signIn/signInBg1.png) no-repeat;
    background-size:100% 100%;
}
.module2>ul>li .weekLi>h2{
    width: 100%;
    height: 1.3333rem;
    line-height: 1.3333rem;
    text-align: center;
    font-size: .7467rem;
    color: #8d562c;
    font-weight: 600;
}
.module2>ul>li .weekLi>img{
    width: 3.2rem;
    height: 3.2rem;
    margin: 0 auto;
}
.module2>ul>li .weekLi>p{
    width: 100%;
    font-size: .5333rem;
    color: #8d562c;
    text-align: center;
    font-weight: 500;
}
.module2>ul>li .succeed{
    position: absolute;
    width: 4.6133rem;
    height: 2.4533rem;
    background: url(../assets/img/signIn/ok.png) no-repeat;
    background-size:100% 100%;
    right: -0.8rem;
    bottom: 0;
}
.module2>ul>li .grey {
    /*grayscale(val):val值越大灰度就越深*/
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    text-align: center;
}

.title1{
    width: 12.9067rem;
    height: 1.5467rem;
    background: url(../assets/img/signIn/title2.png) no-repeat;
    background-size:100% 100%;
    margin: 0 auto 1.6rem;
}
.month{
    width: 94%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.month .list{
    width: 6.8267rem;
    height: 4.32rem;
    margin: 0 .6rem;
    position: relative;
}

.month .list .monthLi{
    width: 6.8267rem;
    height: 4.32rem;
    background: url(../assets/img/signIn/weekBg.png) no-repeat;
    background-size:100% 100%;
}
.month .list .grey{
    /*grayscale(val):val值越大灰度就越深*/
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    text-align: center;
}

.month .list .monthSucceed{
    position: absolute;
    width: 4.6133rem;
    height: 2.4533rem;
    background: url(../assets/img/signIn/ok.png) no-repeat;
    background-size:100% 100%;
    right: -0.8rem;
    bottom: 0;
}
.month .list .monthLi .imgList{
    width: 3.4133rem;
    height: 4.32rem;
    float: left;
}
.month .list .monthLi .imgList:last-child{
    float: right;
}
.month .list .monthLi .imgList>img{
    display: block;
    width: 2.1333rem;
    height: 2.1333rem;
    margin: .5333rem auto .5rem;
}
.month .list .monthLi .imgList>p{
    width: 100%;
    height: .8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: .6rem;
    text-align: center;
    font-size: .48rem;
    font-weight: 500;
    color: #8d562c;
}
.month .list .monthLi .addImg{
    width: 1.28rem;
    height: 1.1733rem;
    background: url(../assets/img/signIn/add.png) no-repeat;
    background-size:100% 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top:.8rem
}
.progress{
    width: 24rem;
    height: 1.6rem;
    margin: .5867rem auto;
}
.progress .row{
    width: 23.4667rem;
    height: .5867rem;
    background: #f1d09b;
    border-radius: .5333rem;
    margin: .5867rem auto;
    position: relative;
}
.progress .row .bg{
    width: 100%;
    height: 1.3333rem;
    position: absolute;
    top:-.4267rem;
    left:0;
}
.progress .row .bg>p{
    width: 6.8267rem;
    height: 1.3333rem;
    margin-right:1.4933rem;
    float: left;
}
.progress .row .bg>p:last-child{
    margin-right: 0;
}
.progress .row .bg>p>span{
    display: block;
    width: 1.28rem;
    height: 1.28rem;
    background: #f1d09b;
    border-radius: 50%;
    margin: .1067rem auto;
    overflow: hidden;
}
.progress .row .centre_row{
    width: 0%;
    width: 99%;
    height: .2667rem;
    margin: .16rem auto;
    background: #8d562c;
    border-radius: .5333rem;
    position: absolute;
    top: 0;
    left: .24rem;
}
.progress .row .bg>p>span>i{
    display: block;
    width: .96rem;
    height: .96rem;
    background: #8d562c;
    border-radius: 50%;
    margin: .16rem auto;
}
.progress_text{
    width: 23.4667rem;
    margin: 0 auto;
}
.progress_text>p{
    width: 6.8267rem;
    margin-right:1.4933rem;
    float: left;
    font-size: .8rem;
    font-weight: 900;
    text-align: center;
    color: #8d562c;
}
.progress_text>p:last-child{
    margin-right: 0;
}
.cont .signIn_btn{
    width: 24rem;
    height: 3.04rem;
    background: #8d562c;
    border-radius: 1.6rem;
    font-size:1.0667rem;
    text-align: center;
    line-height: 3.04rem;
    color: #fff;
    margin: 2rem auto;
    font-weight: 500;
}
.cont .rule{
    width: 24.2133rem;
    height: 12.4533rem;
    background: url(../assets/img/signIn/rule.png) no-repeat;
    background-size:100% 100%;
    margin: 0 auto 3rem;
    overflow: hidden;
}
.rule>img{
    width: 12.9067rem;
    height: 2.0267rem;
    margin: 1.0667rem auto;
}
.rule .rule_text{
    width: 20.8rem;
    margin: 0 auto;
}
.rule .rule_text>p{
    font-size: .9067rem;
    line-height: 1.44rem;
    color: #8d562c;
    font-weight: 600;
}
</style>